import{d as t,M as l,A as s,h as o}from"./Anchors-CRD96j4l.js";import{D as r,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const c={path:"/view/modal",name:"modal",title:"Modal 模态对话框"};function n(d){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...d.components};return l(o,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),c.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(r,{columns:2}),t(i,{id:"base",title:"基本用法",src:"1base.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);
    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" visible={[visible, setVisible]}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"visible"})," 为可控绑定参数"]})}),t(i,{id:"disabled",title:"禁用拖拽",src:"2disabled.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);
    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal disabled title="提示" visible={[visible, setVisible]}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["使用",t(e.code,{className:"sp-inline-code",children:"disabled"}),"参数可禁用拖拽"]})}),t(i,{id:"style",title:"自定义位置",src:"3style.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);
    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" visible={[visible, setVisible]} defaultPosition={{top: '200px'}}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["使用",t(e.code,{className:"sp-inline-code",children:"defaultPosition"})," 参数可初始化位置"]})}),t(i,{id:"footer",title:"影藏底部",src:"4footer.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);
    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" visible={[visible, setVisible]} footer={false}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"footer"})," 参数为false可隐藏底部元素"]})}),t(i,{id:"loading",title:"加载中",src:"5loading.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);
    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" visible={[visible, setVisible]} loading onOk={() => {
            console.log('click ok');
            setTimeout(() => {
                setVisible(false);
            }, 2000);
        }}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置",t(e.code,{className:"sp-inline-code",children:"loading"})," 参数，点击确定按钮变成加载中"]})}),t(i,{id:"fullscreen",title:"全屏",src:"6fullscreen.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);
    const [fullScreen, setFullScreen] = createSignal(false);

    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" resetPostion visible={[visible, setVisible]} fullScreen={fullScreen()}>
            <div><Button onClick={() => {
                setFullScreen(!fullScreen());
            }}>全屏</Button></div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"fullscreen"})," 属性为可控全屏属性"]})}),t(i,{id:"reset",title:"重新打开重置位置",src:"7reset.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);

    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" resetPostion visible={[visible, setVisible]}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"resetPostion"})," 属性，拖拽后 重新打开会定位到初始化位置"]})}),t(i,{id:"mask",title:"不显示遮罩",src:"8mask.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);

    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" mask={false} visible={[visible, setVisible]}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置",t(e.code,{className:"sp-inline-code",children:"mask"})," 属性为false，将不会显示遮罩"]})}),t(i,{id:"maskclose",title:"禁用遮罩关闭",src:"9maskclose.demo.tsx",code:`import { Button, Modal } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);

    return <>
        <Button type="primary" onClick={() => {
            setVisible(true);
        }}>打开</Button>
        <Modal title="提示" maskClosable={false} visible={[visible, setVisible]}>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
            <div>modal 内容</div>
        </Modal>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"maskClosable"})," 属性为false，禁用遮罩点击关闭对话框功能"]})}),t(i,{id:"instance",title:"单实例使用",src:"10instance.demo.tsx",code:`import { Button, modal, Space } from "cui-solid";

export default () => {
    return <Space dir="h">
        <Button type="primary" onClick={() => {
            modal.info({
                title: '信息',
                content: <div>信息</div>
            });
        }}>信息</Button>

        <Button type="success" onClick={() => {
            modal.success({
                title: '成功',
                content: <div>成功</div>
            });
        }}>成功</Button>

        <Button type="warning" onClick={() => {
            modal.warning({
                title: '警告',
                content: <div>警告</div>
            });
        }}>警告</Button>

        <Button type="error" onClick={() => {
            modal.error({
                title: '错误',
                content: <div>错误提示</div>
            });
        }}>错误</Button>

        <Button type="primary" onClick={() => {
            modal.confirm({
                title: '提示',
                loading: true,
                content: <div>确认信息</div>,
                onOk: () => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, 2000);
                    });
                }
            });
        }}>确认</Button>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["使用modal的 方法弹出对话框，",t(e.code,{className:"sp-inline-code",children:"onOk"}),"回调可以返回一个",t(e.code,{className:"sp-inline-code",children:"true"}),"/",t(e.code,{className:"sp-inline-code",children:"false"}),",来控制modal的关闭",t(e.br,{}),`
`,"返回true立即关闭， 返回false不关闭会将",t(e.code,{className:"sp-inline-code",children:"loading"}),"重置，不返回或undefined，则按照默认方式处理"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"bounds"}),t(e.td,{style:{textAlign:"left"},children:"拖拽边界"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"body"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用拖拽"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"对话框的标题"}),t(e.td,{style:{textAlign:"left"},children:"string | JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"bodyStyle"}),t(e.td,{style:{textAlign:"left"},children:"内容区域的样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"footer"}),t(e.td,{style:{textAlign:"left"},children:"是否显示底部"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"true"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"loading"}),t(e.td,{style:{textAlign:"left"},children:"加载中,可控"}),t(e.td,{style:{textAlign:"left"},children:"boolean | Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"okText"}),t(e.td,{style:{textAlign:"left"},children:"确认按钮文案"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"确 定"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"cancleText"}),t(e.td,{style:{textAlign:"left"},children:"取消按钮文案"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"取 消"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"visible"}),t(e.td,{style:{textAlign:"left"},children:"控制对话框的显示隐藏"}),t(e.td,{style:{textAlign:"left"},children:"boolean | Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"defaultPosition"}),t(e.td,{style:{textAlign:"left"},children:"默认位置"}),t(e.td,{style:{textAlign:"left"},children:"Position"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"mask"}),t(e.td,{style:{textAlign:"left"},children:"显示mask"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"true"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"maskClosable"}),t(e.td,{style:{textAlign:"left"},children:"点击mask关闭"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"true"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"hasCloseIcon"}),t(e.td,{style:{textAlign:"left"},children:"是否显示关闭按钮"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"true"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"resetPostion"}),t(e.td,{style:{textAlign:"left"},children:"重新打开对话框进行位置重置"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"fullScreen"}),t(e.td,{style:{textAlign:"left"},children:"全屏控制"}),t(e.td,{style:{textAlign:"left"},children:"boolean | Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onOk"}),t(e.td,{style:{textAlign:"left"},children:"点击确认按钮回调"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onCancel"}),t(e.td,{style:{textAlign:"left"},children:"点击取消按钮回调"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onClosed"}),t(e.td,{style:{textAlign:"left"},children:"关闭事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onClickClose"}),t(e.td,{style:{textAlign:"left"},children:"点击关闭按钮事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onOk"})}),t(e.td,{style:{textAlign:"left"},children:"点击确认按钮回调"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onCancel"})}),t(e.td,{style:{textAlign:"left"},children:"点击取消按钮回调"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onClosed"})}),t(e.td,{style:{textAlign:"left"},children:"关闭事件"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onClickClose"})}),t(e.td,{style:{textAlign:"left"},children:"点击关闭按钮事件"}),t(e.td,{style:{textAlign:"left"}})]})]})]})]}),`
`,`
`,`
`,t(s,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基本用法",src:"1base.demo.tsx"},{id:"disabled",title:"禁用拖拽",src:"2disabled.demo.tsx"},{id:"style",title:"自定义位置",src:"3style.demo.tsx"},{id:"footer",title:"影藏底部",src:"4footer.demo.tsx"},{id:"loading",title:"加载中",src:"5loading.demo.tsx"},{id:"fullscreen",title:"全屏",src:"6fullscreen.demo.tsx"},{id:"reset",title:"重新打开重置位置",src:"7reset.demo.tsx"},{id:"mask",title:"不显示遮罩",src:"8mask.demo.tsx"},{id:"maskclose",title:"禁用遮罩关闭",src:"9maskclose.demo.tsx"},{id:"instance",title:"单实例使用",src:"10instance.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"events",depth:2,title:"事件"}]})]})}function m(d={}){const{wrapper:e}=d.components||{};return e?t(e,{...d,children:t(n,{...d})}):n(d)}export{m as default,c as frontmatter};
